<template>
  <view class="help-container">
    <!-- 常见问题 -->
    <view class="faq-section">
      <text class="section-title">常见问题</text>
      <view class="faq-list">
        <!-- FAQ 项 1 -->
        <view class="faq-item" @click="toggleFaq(0)">
          <view class="faq-question">
            <text>如何预约挂号？</text>
            <uni-icons :type="faqExpanded[0] ? 'up' : 'down'" size="24" color="#666"></uni-icons>
          </view>
          <view class="faq-answer" v-if="faqExpanded[0]">
            <text>您可以在首页点击"预约挂号"按钮，选择医院、科室和医生，然后选择就诊日期和时间段完成预约。预约成功后，您将收到短信通知。</text>
          </view>
        </view>

        <!-- FAQ 项 2 -->
        <view class="faq-item" @click="toggleFaq(1)">
          <view class="faq-question">
            <text>如何查看我的就诊记录？</text>
            <uni-icons :type="faqExpanded[1] ? 'up' : 'down'" size="24" color="#666"></uni-icons>
          </view>
          <view class="faq-answer" v-if="faqExpanded[1]">
            <text>在"我的"页面中，点击"就诊记录"选项，即可查看您的历史就诊信息，包括就诊时间、医院、科室、诊断结果等详细内容。</text>
          </view>
        </view>

        <!-- FAQ 项 3 -->
        <view class="faq-item" @click="toggleFaq(2)">
          <view class="faq-question">
            <text>如何更新我的个人健康档案？</text>
            <uni-icons :type="faqExpanded[2] ? 'up' : 'down'" size="24" color="#666"></uni-icons>
          </view>
          <view class="faq-answer" v-if="faqExpanded[2]">
            <text>进入"我的"页面，选择"健康档案"，点击右上角的"编辑"按钮即可更新您的个人信息、既往病史、过敏史等健康相关信息。更新后系统将自动保存。</text>
          </view>
        </view>

        <!-- FAQ 项 4 -->
        <view class="faq-item" @click="toggleFaq(3)">
          <view class="faq-question">
            <text>忘记密码怎么办？</text>
            <uni-icons :type="faqExpanded[3] ? 'up' : 'down'" size="24" color="#666"></uni-icons>
          </view>
          <view class="faq-answer" v-if="faqExpanded[3]">
            <text>在登录页面点击"忘记密码"，输入您的注册手机号，获取验证码并填写，然后设置新密码即可完成密码重置。</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 使用指南 -->
    <view class="guide-section">
      <text class="section-title">使用指南</text>
      <view class="guide-list">
        <view class="guide-item" >
          <uni-icons type="bookmark" size="28" color="#1E88E5"></uni-icons>
          <text class="guide-text">预约挂号流程</text>
          <uni-icons type="right" size="24" color="#999"></uni-icons>
        </view>
        <view class="guide-item" >
          <uni-icons type="list" size="28" color="#1E88E5"></uni-icons>
          <text class="guide-text">就诊记录管理</text>
          <uni-icons type="right" size="24" color="#999"></uni-icons>
        </view>
        <view class="guide-item">
          <uni-icons type="credit-card" size="28" color="#1E88E5"></uni-icons>
          <text class="guide-text">在线支付说明</text>
          <uni-icons type="right" size="24" color="#999"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 联系支持 -->
    <view class="contact-support">
      <text class="section-title">联系支持</text>
      <view class="contact-methods">
        <view class="contact-method">
          <uni-icons type="phone" size="32" color="#1E88E5"></uni-icons>
          <text class="method-text">电话咨询</text>
          <text class="method-detail">400-123-4567</text>
        </view>
        <view class="contact-method">
          <uni-icons type="email" size="32" color="#1E88E5"></uni-icons>
          <text class="method-text">邮件反馈</text>
          <text class="method-detail">support@yiliaokeji.com</text>
        </view>
        <view class="contact-method">
          <uni-icons type="chat" size="32" color="#1E88E5"></uni-icons>
          <text class="method-text">在线客服</text>
          <text class="method-detail">工作日 9:00-18:00</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      faqExpanded: [true, true, true, true] // 控制每个FAQ项的展开状态
    };
  },
  methods: {
    // 返回上一页
    navigateBack() {
      uni.navigateBack({
        delta: 1
      });
    },
    // 切换FAQ展开/收起状态
    toggleFaq(index) {
      this.faqExpanded[index] = !this.faqExpanded[index];
    },
  }
};
</script>

<style scoped>

/* 通用区块样式 */
.faq-section, .guide-section, .contact-support {
  background-color: #fff;
  margin: 0 30rpx 30rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  display: block;
}

/* FAQ 样式 */
.faq-list {
  width: 100%;
}

.faq-item {
  border-bottom: 1px solid #f5f5f5;
  padding: 25rpx 0;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  color: #333;
}

.faq-answer {
  margin-top: 15rpx;
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  padding-left: 5rpx;
}

/* 使用指南样式 */
.guide-list {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.guide-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.guide-item:last-child {
  border-bottom: none;
}

.guide-text {
  font-size: 28rpx;
  color: #333;
  margin-left: 20rpx;
  flex: 1;
}

/* 联系支持样式 */
.contact-methods {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.contact-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30%;
  margin-bottom: 20rpx;
}

.method-text {
  font-size: 28rpx;
  color: #333;
  margin: 15rpx 0 5rpx;
}

.method-detail {
  font-size: 24rpx;
  color: #666;
  text-align: center;
}
</style>